import React from "react";
import { useState } from "react";
import { useEffect } from "react";

let m = 0;

export const Test = (props) => {
  // console.log(props);
  // let i = 0;
  // console.log(i, "init");
  console.log(++m, "m");
  const [count, setCount] = useState(() => {
    console.log(1, "init");
    return 0;
  });
  // const [count1, setCount1] = useState(() => props.i);

  const handleClick = () => {
    let i = count + 1;
    setCount((prev) => {
      console.log(prev, "prev");
      return i;
    });
  };

  // useEffect(() => {
  //   const fn = () => {
  //     let i = count + 1;
  //     // setCount(i);
  //     console.log(count);
  //     return i;
  //     // setCount1(i);
  //   };
  //   // fn();
  //   const ret = fn();
  //   console.log(ret);
  //   console.log("useEffect");
  // }, [count]);
  return (
    <>
      <p>{props.title}</p>
      <p>{count}</p>
      <button onClick={handleClick}>点我</button>
      {/* <p>{count1}</p>
      <button onClick={handleClick}>点我1</button> */}
    </>
  );
};

export const Test2 = React.memo(Test);
